<template>
  <view class="container">
    <!-- 头部返回 -->
    <!-- <view class="fixed-con">
      <statusBar></statusBar>
      <view class="go-back" :style="{'background-color':`rgba(255,255,255,${opacity})`}" @click="goBack">
        <image src="../../static/go-back.svg" @click="goBack"/>

        <image class="img-hide" src="../../static/brands-search.svg"/>
      </view>
    </view> -->
    <!-- 品牌信息 -->
    <view class="introduce">
      <view class="bg">
        <image :src="dataList.brandDetailInfo.backgroundImage"/>
      </view>
      <view class="introduce-con">
        <view class="con-top">
          <view class="brand-name">
            <image :src="dataList.brandDetailInfo.coverPic"/>
            <view>
              <text>{{dataList.brandDetailInfo.name}}</text>
              <text>69.9万人关注</text>
            </view>
          </view>
          <view @click="brandAttention" v-if="dataList.brandDetailInfo.collectStatus" class="attention">已关注</view>
          <view @click="brandAttention" v-else class="attention">关注TA</view>
        </view>
        <view class="more-text">
          <!-- <expandable-text :longText="dataList.brandDetailInfo.content" :line="4" expandText="展开" foldText="收起"></expandable-text> -->
          <expandable-text longText="代代相传至今的路易LouisVuitton)，以卓越品质、杰出创意和精湛工艺成以卓越品质、杰出创意和精湛工艺成以卓越品质、杰出创意和精湛工艺成以卓越品质、杰出创意和精湛工艺成艺成艺成艺成艺成艺成哈哈" :line="4" expandText="展开" foldText="收起"></expandable-text>
        </view>
      </view>
    </view>
 
    <z-tabs 
      ref="tabs" 
      :list="tabList" 
      :current="current" 
      @change="tabsChange" 
      :barWidth="'26rpx'" 
      :activeColor="'#16DFF2'" 
      :activeStyle="activeStyle"
      :inactiveStyle="inactiveStyle"
      tabWidth="80rpx"
    />
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" 
      :current="current" 
      :style="{ height: swiperHeight + 'px' }"
      @transition="swiperTransition" 
      @animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
				<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
				<!-- <swiperListItem :tabIndex="index" :currentIndex="current"></swiperListItem> -->
        <!-- -----------------------动态栏 -->
        <view v-if="index === 0" class="dynamic" :id="'content-wrap' + index">
          <abreastCon :dataList="dataList.dynamicList"></abreastCon>
        </view>
        <!-- -----------------------商品栏 -->
        <view v-if="index === 1" class="shop" :id="'content-wrap' + index">
          <view class="shop-type">
            <view 
              :class="['type-item',isChangeType === index?'change-item':'']" 
              v-for="(item,index) in dataList.shopTypeList" 
              :key="item.id"
              @click="changeType(item.id)"
            >{{item.name}}</view>
          </view>
          <view class="shop-list">
            <view class="shop-item" v-for="item in dataList.shopList" :key="item.id">
              <image :src="item.coverPic"/>
              <view v-if="item.fineness">{{item.fineness}}</view>
              <text>{{item.name}}</text>
              <text>¥{{item.salePrice}}</text>
            </view>
          </view>
          <!-- 已经到底了 -->
          <view class="is-end" v-if="isEnd">没有更多了</view>
        </view>
        <view v-if="index === 2" class="illustrated" :id="'content-wrap' + index">
          3
        </view>
        <view class="safe-padding"></view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import { ref, watch,reactive,getCurrentInstance,onMounted,nextTick   } from 'vue';  
  import {
    onLoad,
    onShow,
    onPageScroll
  } from "@dcloudio/uni-app";	
  import { articleList } from '@/api/posting.js'
  import { brandDetail,brandCollection,brandArticles } from '@/api/brand.js'
  import { brandGoodsList } from '@/api/shop.js'

  const instance = getCurrentInstance()
  const paging = ref(null);
	const tabs = ref(null);
	
  const swiperHeight = ref(0)
	const current = ref(0);
	const tabList = ref(['动态','商品','图鉴']);
	const activeStyle = reactive({
    color: '#111111',
    fontSize: '28rpx',
    fontWeight: 500
  })
  const inactiveStyle = reactive({
    color: '#838286',
    fontSize: '28rpx',
    fontWeight: 400
  })
  const dataList = reactive({
    //品牌详细信息
    brandDetailInfo:{},
    //动态数据
    dynamicList:[],
    //商品数据
    shopList:[],
    //图鉴数据
    illustratedList:[],
    //商品数据的分类
    shopTypeList:[
      {
        id:0,
        name:'全部'
      }
    ]
  })
  const brandId = ref(0)
  const isChangeType = ref(0)
  const opacity = ref(0)
  //品牌下面商品的数据分页
  const pageData = reactive({
		pageSize:10,
		page:1
	})
  //是否加载结束
  const isEnd = ref(false)

  onLoad(({id}) => {
    brandId.value = id
    getBrandDetail(Number(id))
    getDynamicData(Number(id))
  })
  onMounted(() => {
    // setSwiperHeight()
    getShopListByType()
  })

  //页面滚动事件
  // onPageScroll(e => {
  //   console.log('e',e);
  //   console.log('e.scrollTop',e.scrollTop);
  //   if (e.scrollTop <= 44) {
  //     opacity.value = e.scrollTop / 44 * 1
  //   } else if (e.scrollTop > 44) {
  //     opacity.value = 1
  //   }
  // })

	const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}

  const changeType = (i) => {
    isChangeType.value = i
    pageData.page = 1
    getShopListByType()
  }

  // tabs通知swiper切换
	const tabsChange = (index) => {
		current.value = index;
    setSwiperHeight()
	}

  // swiper滑动中
	const swiperTransition = (e) => {
		tabs.value.setDx(e.detail.dx);
	}
	
	// swiper滑动结束
	const swiperAnimationfinish = (e) => {
		current.value = e.detail.current;
		tabs.value.unlockDx();
	}

  //动态设置swiper的高度
  const setSwiperHeight = () => {
    let element = "#content-wrap" + current.value;
    let query = uni.createSelectorQuery().in(instance);
    query.select(element).boundingClientRect((res) => {
      if (res.height) {
        swiperHeight.value = res.height;
        console.log('高度',res.height)
      }
    }).exec();
  }
  //品牌详情
  const getBrandDetail = async (id) => {
    const res = await brandDetail({ id })
    dataList.brandDetailInfo = res
    console.log('品牌详情',res);
    dataList.shopTypeList = [...dataList.shopTypeList,...res.types]
  }

  //获取动态栏数据
  const getDynamicData = async (id) => {
    const datas = {
			id,
			page: 1,
			pageSize: 10,
		};

		console.log('获取动态栏数据');
    try {
      const res = await brandArticles(datas);
      console.log('动态栏数据',res);
      dataList.dynamicList = res.list;
    } catch (error) {
      console.log('error',error);
      dataList.dynamicList = error.list
    }
    
    await nextTick()
    setSwiperHeight()
  }

  //品牌关注 取消关注
  const brandAttention = async () => {
    let res = await brandCollection({id:dataList.brandDetailInfo.id})``
    console.log('品牌关注res',res);
    uni.showToast({
      title: dataList.brandDetailInfo.collectStatus == 0 ? '关注成功' : '已取消关注',
      duration: 2000,
      icon:'none'
    });
    getBrandDetail(dataList.brandDetailInfo.id)
  }

  //获取商品栏下面的商品
  const getShopListByType = async () => {
    let datas = {
      ...pageData,
      brandId:brandId.value,
      typeId:isChangeType.value
    }
    let res = await brandGoodsList(datas)
    dataList.shopList = res.list
    console.log('商品',res)

    await nextTick()
    setSwiperHeight()
  }
</script>

<style lang="scss" scoped>
  .container{
    width: 100vw;
    height: 100vh;
    background-color: #F4F4F4;
		/* position: fixed;
		top: 0;
		left: 0; */
    /* overflow-x: hidden;
    overflow-y: scroll; */

    .fixed-con{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      .go-back{
        width: 750rpx;
        height: 90rpx;
        padding:0 30rpx;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0);
        @include flex(row,space-between,center);
        image{
          width: 40rpx;
          height: 40rpx;
        }
        view{
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }
        .img-hide{
          opacity: 0;
        }
      }
    }
    .introduce{
      width: 750rpx;
      /* height: 742rpx; */
      margin-bottom: 20rpx;
      margin-top: var(--status-bar-height);
      .bg{
        width: 750rpx;
        height: 476rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .introduce-con{
        width: 750rpx;
        /* height: 332rpx; */
        background: rgba(255,255,255,0.78);
        border: 2rpx solid;
        border-image: linear-gradient(171deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
        backdrop-filter: blur(4px);
        position: relative;
        left: 0;
        /* bottom: 50rpx; */
        padding-bottom: 40rpx;
        .con-top{
          width: 750rpx;
          height: 108rpx;
          padding: 0 30rpx;
          box-sizing: border-box;
          @include flex(row,space-between);
          .brand-name{
            width: 500rpx;
            @include flex(row,flex-start);
            image{
              width: 136rpx;
              height: 136rpx;
              border-radius: 50%;
              border: 2rpx solid #16DFF2;
              margin-right: 20rpx;
              position: relative;
              top: -30rpx;
            }
            view{
              @include flex(column,center,flex-start);
              text:nth-of-type(1){
                font-weight: 900;
                font-size: 32rpx;
                color: #333333;
              }
              text:nth-of-type(2){
                font-weight: 400;
                font-size: 22rpx;
                color: #A9A7B3;
              }
            }
          }
          .attention{
            width: 130rpx;
            height: 56rpx;
            background: #16DFF2;
            border-radius: 28rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 56rpx;
          }
        }
        .con-text{
          padding: 0 30rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          margin-top: 16rpx;
          /* line-height: 40rpx;
          max-height: 160rpx; */
          overflow: hidden;
          position: relative;

          .text{
            /* position: absolute;
            top: 0;
            left: 0; */
            @include text-overflow-many(4);
          }
          .more-text{
            display: none;
          }

          .more{
            position: absolute;
            bottom: 0;
            /* top: 160rpx;
            right: 30rpx; */
            /* font-weight: 400;
            font-size: 28rpx;
            background-color: white; */
            color: #0BB1B0;
            /* height: 40rpx;
            line-height: 40rpx; */
          }

          .unfold{
            color: #0BB1B0;
          }
        }

        .more-text{
          width: 690rpx;
          margin: auto;
          margin-top: 16rpx;
        }
      }
    }
    .shop{
      .shop-type{
        width: 750rpx;
        height: 120rpx;
        background-color: white;
        @include flex(row,flex-start);
        .type-item{
          width: 108rpx;
          height: 52rpx;
          background: #F4F4F4;
          border-radius: 30rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          margin: 0 12rpx;
          @include flex();
          box-sizing: border-box;
        }
        .type-item:nth-child(1){
          margin-left: 30rpx;
        }
        .change-item{
          background: rgba(22,223,242,0.13);
          border-radius: 30rpx;
          border: 2rpx solid #16DFF2;
          font-weight: 500;
          color: #333333;
        }
        
      }
      .shop-list{
        background-color: #FFFFFF;
        @include flex(row,flex-start,flex-start,wrap);
        .shop-item{
          width: 375rpx;
          height: 432rpx;
          background: linear-gradient( 145deg, #FFFFFF 0%, #F8F8F8 100%);
          @include flex(column,flex-start,flex-start);
          image{
            width: 375rpx;
            height: 276rpx;
          }
          view{
            width: 100rpx;
            height: 30rpx;
            border: 1rpx solid #FE485B;
            font-weight: 400;
            font-size: 22rpx;
            color: #FE475B;
            text-align: center;
            line-height: 30rpx;
            margin-top: 16rpx;
            margin-left: 30rpx;
          }
          text:nth-of-type(1){
            font-weight: 400;
            font-size: 26rpx;
            color: #333333;
            padding: 0 20rpx 0 30rpx;
            @extend %text-overflow;
            margin: 10rpx 0 20rpx 0;
          }
          text:nth-of-type(2){
            font-family: Roboto, Roboto;
            font-weight: 500;
            font-size: 22rpx;
            color: #111111;
            padding-left: 30rpx;
          }
        }
      }
    }

    .is-end{
      text-align: center;
      margin: 20rpx;
      color: #8a8a8a;
    }
  }


</style>